{% extends 'layout/manage.html' %}
{% load static %}

{% block css %}
<style>
 .panel-default .panel-heading {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }

 .panel-default > .panel-heading a {
     text-decoration: none;
 }

 .panel-default > .panel-heading span {
     padding: 0 5px;
 }


 .panel-default > .panel-heading .function .upload {
     overflow: hidden;
 }

 .panel-default > .panel-heading .function .upload input {
     opacity: 0;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 76px;
     left: -2px;
     overflow: hidden;
 }

 .upload-progress {
     position: fixed;
     right: 2px;
     bottom: 2px;
     width: 400px;
 }

 .upload-progress .progress-error {
     color: red;
 }

</style>
{% endblock css %}


{% block content %}
<div class="container-fluid">

    <div class="panel panel-default" style="margin-top: 20px;">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <!-- 左侧顶头，面包屑文件路径，面包屑中涉及图标判断-->
            <div>
                <a href="{% url 'file' project_id=request.tracer.project.id %}">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>文件库</span>
                </a>
                {% for record in breadcrumb_list %}
                <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ record.id }}">
                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                    <span>{{ record.name }}</span>
                </a>
                {% endfor %}
            </div>

            <!-- 右侧顶头，按钮 -->
            <div class="function">
                <div class="btn btn-primary btn-xs upload" style="position: relative">
                    <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
                    <input type="file" multiple name="uploadFile" id="uploadFile">
                </div>
                <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                </a>
            </div>
        </div>
        <!-- Table -->
        <table class="table">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>文件大小</th>
                    <th>更新者</th>
                    <th>更新时间</th>
                    <th>操作</th>

                </tr>
            </thead>
            <tbody id="rowList">
                {% for item in file_object_list %}
                <tr>
                    <td>
                        <!-- 依据类型选择文件或文件夹图标 -->
                        {% if item.file_type == 1 %}
                        <i class="fa fa-file" aria-hidden="true"></i>
                        {{ item.name }}
                        {% else %}
                        <!-- 文件夹额外构造文件夹跳转链接 -->
                        <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                            <i class="fa fa-folder" aria-hidden="true"></i>
                            {{ item.name }}
                        </a>
                        {% endif %}
                    </td>
                    <td>
                        <!-- 文件显示大小 -->
                        {% if item.file_type == 1 %}
                        {{ item.file_size }}
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td>{{ item.update_user.username }}</td>
                    <td>{{ item.update_datetime }}</td>
                    <td>
                        {% if item.file_type == 2 %}
                        <!-- 对于文件夹，编辑文件夹名字、父目录，或新建子文件夹 -->
                        <a class="btn btn-default btn-xs"
                           data-toggle="modal"
                           data-target="#addModal"
                           data-name="{{ item.name }}"
                           data-fid="{{ item.id }}"
                           data-whatever="修改文件夹">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                        </a>
                        {% else %}
                        <a class="btn btn-default btn-xs"
                           href="{% url 'file_download' project_id=request.tracer.project.id file_id=item.id %}">
                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                        </a>
                        {% endif %}

                        <!-- 每一行的删除按钮 -->
                        <a class="btn btn-danger btn-xs"
                           data-toggle="modal"
                           // 保存要被删除的文件的id，便于ajax请求删除时，删除改文件对象
                           data-fid="{{ item.id }}"
                           // 调用的模态框
                           data-target="#alertModal">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </a>

                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form id="form">
                    {% csrf_token %}
                    <input class="hide" type="text" name="fid" id="fid">
                    {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg">{{ field.errors.0 }}</span>
                    </div>
                    {% endfor %}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button id="btnFormSubmit" type="button" class="btn btn-primary">确 定</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除文件时的警告模态框 -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span></button>
            <h4>是否要确定删除？</h4>
            <p style="padding-top: 20px;padding-bottom: 20px;">
                文件夹中包含的所有的文件都会被删除。
            </p>
            <p style="text-align: right;">
                <a class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
                <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
            </p>
        </div>
    </div>
</div>


<div id="uploadProgress" class="upload-progress hide">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传进度
        </div>

        <table class="table">
            <tbody id="progressList">

            </tbody>
        </table>
    </div>
</div>

<div class="hide">
    <table id="progressTemplate">
        <tr>
            <td>
                <div class="name"></div>
                <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                         aria-valuenow="0"
                         aria-valuemin="0"
                         aria-valuemax="100" style="width: 0%;">
                        0%
                    </div>
                </div>
                <div class="progress-error"></div>
            </td>
        </tr>
    </table>
</div>

<div class="hide">
    <table id="rowTpl">
        <tr>
            <td>
                <i class="fa fa-file" aria-hidden="true"></i>
                <span class="name"></span>
            </td>
            <td class="file_size"></td>
            <td class="username"></td>
            <td class="datetime"></td>
            <td>
                <a class="btn btn-default btn-xs download">
                    <i class="fa fa-cloud-download" aria-hidden="true"></i>
                </a>
                <a class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
            </td>
        </tr>
    </table>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'web/js/cos-js-sdk-v5.min.js' %}"></script>

<script>

 var FOLDER_URL = "{% url 'file' project_id=request.tracer.project.id %}";
 var FILE_DELETE_URL = "{% url 'file_delete' project_id=request.tracer.project.id %}";
 var COS_CREDENTIAL = "{% url 'cos_credential' project_id=request.tracer.project.id %}";
 var FILE_POST = "{% url 'file_post' project_id=request.tracer.project.id %}";
 var CURRENT_FOLDER_ID = "{{ folder_object.id }}";

 $(function () {
     initAddModal();
     bindModelSubmit();
     bindDeleteSubmit();
     bindUploadFile();
 });

 function bindUploadFile() {
     // 获取临时凭证（获取一次5分钟, 在 cos.py 中配置），注意腾讯cos桶设置需要允许跨域
     $('#uploadFile').change(function () {
         $('#progressList').empty();

         var fileList = $(this)[0].files; // jquery 对象转为 dom 对象
         // 获取本次要上传的每个文件 名称&大小
         var checkFileList = [];
         // input 中设置属性 multiple , 文件可多选
         $.each(fileList, function (index, fileObject) {
             checkFileList.push({'name': fileObject.name, 'size': fileObject.size})
             // 这里我们我们的文件数据 fileList 为字典列表存储，这种格式
             // django 无法直接通过 request 对象的 GET 或 POST 属性读取文件大小和名字
             // 所以下一步获取临时凭证的时候，将 filList 作json处理, django
             // 则是在 request.body 内获取json数据
         });

         // 把这些数据发送到django后台：Django后台进行容量的校验，如果么有
         // 问题则返回临时凭证；否则返回错误信息；
         var cos_credential = new COS({
             getAuthorization: function (options, callback) {
                 $.post(COS_CREDENTIAL, JSON.stringify(checkFileList), function (res) {
                     if (res.status) {
                         var credentials = res.data && res.data.credentials;
                         callback({
                             TmpSecretId: credentials.tmpSecretId,
                             TmpSecretKey: credentials.tmpSecretKey,
                             XCosSecurityToken: credentials.sessionToken,
                             StartTime: res.data.startTime,
                             ExpiredTime: res.data.expiredTime
                         });

                         // 获取临时凭证成功，显示进度条
                         $('#uploadProgress').removeClass('hide');
                     } else {
                         alert(res.error);
                     }
                 });
             }
         });

         // 通过临时凭证上传文件
         $.each(fileList, function (index, fileObject) {
             var fileName = fileObject.name;
             var fileSize = fileObject.size;
             var key = (new Date()).getTime() + "_" + fileName;

             // 页面上隐藏了一个显示上传进度的面板(嵌入一个表格，每一行对应一个上传进度)
             // 这里克隆改面板
             var tr = $('#progressTemplate').find('tr').clone();
             tr.find('.name').text(fileName);
             $('#progressList').append(tr);

             // 上传文件（异步）
             cos_credential.putObject({
                 Bucket: '{{ request.tracer.project.bucket }}', /* 必须 */
                 Region: '{{ request.tracer.project.region }}', /* 存储桶所在地域，必须字段 */
                 Key: key, /* 必须 */
                 Body: fileObject, // 上传文件对象
                 onProgress: function (progressData) {
                     var percent = progressData.percent * 100 + '%';
                     tr.find('.progress-bar').text(percent);
                     tr.find('.progress-bar').css('width', percent);
                 }
             }, function (err, data) {
                 if (data && data.statusCode === 200) {
                     // 上传成功，将本次上传的文件提交到后台并写入数据
                     // 当前文件上传成功
                     $.post(FILE_POST, {
                         name: fileName,
                         key: key,
                         file_size: fileSize,
                         parent: CURRENT_FOLDER_ID,
                         // Etag 理解为cos中对上传文件的标记，可用于ajax上传成功后，将该值传给后端，
                         // django 用这个 Etag 与 cos 桶中刚刚上传的文件 Etag 作对比，验证
                         // 前端上传后发送到后端的信息的有效性，避免前端部
                         // 分跳过cos上传步骤，直接向后台恶意向数据库发送虚假数据。验证后，可以保证
                         // 数据库信息与 cos 的一致性
                        
                         etag: data.ETag, 
                         file_path: data.Location
                     }, function (res) {
                         // 在数据库中写入成功，将已添加的数据在页面上动态展示。
                         var newTr = $('#rowTpl').find('tr').clone();
                         newTr.find('.name').text(res.data.name);
                         newTr.find('.file_size').text(res.data.file_size);
                         newTr.find('.username').text(res.data.username);
                         newTr.find('.datetime').text(res.data.datetime);
                         newTr.find('.delete').attr('data-fid', res.data.id);
                         newTr.find('.download').attr('href', res.data.download_url);
                         $('#rowList').append(newTr);

                         // 删除进度条
                         tr.remove();
                     })

                 } else {
                     tr.find('.progress-error').text('上传失败');
                 }
             });

         })
     });
 }

 function initAddModal() {
     $('#addModal').on('show.bs.modal', function (event) {
         var button = $(event.relatedTarget); // Button that triggered the modal
         var recipient = button.data('whatever'); // Extract info from data-* attributes
         var orignalFileName = button.data('name');
         var fid = button.data('fid'); // file id
         // fid 为空”添加“，否则编辑，后端依赖该值，所以页面添加一个hide的fid input 元素
         var modal = $(this);
         /* 模态框标题动态获取 */
         modal.find('.modal-title').text(recipient);
         /* 每次打开模态框都清空错误消息 */
         modal.find('.error-msg').empty();

         // 两种重置方法
         // document.getElementById('form').reset();
         // $('#form')[0].reset();

         // 文件夹编辑或新建
         if (fid) {
             // 编辑时，为了用户遍历，模态框中预输入原先的文件夹名字
             modal.find('#id_name').val(orignalFileName); // 预填入原名字
             modal.find('#fid').val(fid);
         } else {
             // 新建
             modal.find('.error-msg').empty();
             $('#form')[0].reset();
         }

     });

     $('#alertModal').on('show.bs.modal', function (event) {
         var button = $(event.relatedTarget); // Button that triggered the modal
         var fid = button.data('fid'); // Extract info from data-* attributes
         $('#btnDelete').attr('fid', fid);

     })


 }

 function bindModelSubmit() {
     $('#btnFormSubmit').click(function () {
         $.ajax({
             url: location.href,
             type: "POST",
             data: $("#form").serialize(),
             dataType: "JSON",
             success: function (res) {
                 if (res.status) {
                     location.href = location.href;
                 } else {
                     $.each(res.error, function (key, value) {
                         $("#id_" + key).next().text(value[0]);
                     })
                 }
             }
         })
     })
 }

 function bindDeleteSubmit() {
     $('#btnDelete').click(function () {
         // 获取要删除那行ID
         $.ajax({
             url: FILE_DELETE_URL,
             type: "GET",
             data: {fid: $(this).attr('fid')},
             success: function (res) {
                 if (res.status) {
                     location.href = location.href;
                 }
             }
         })
     })
 }


</script>
{% endblock %}
